<template>
  <div style="display: flex">
    <div>
      <div class="chart" style="flex-basis: 33%; height: 500px">
        <ChartShow name="AI能力评估折线图" :option="option" />
      </div>
      <div class="chart" style="flex-basis: 33%; height: 500px">
        <ChartShow name="AI基础知识柱状图" :option="option1" />
      </div>
      <div class="chart" style="flex-basis: 33%; height: 500px">
        <ChartShow name="AI工具应用柱状图" :option="option2" />
      </div>
    </div>
    <div style="flex-basis: 33%; height: 500px">
      <span class="title">勋章榜</span>
      <div
        style="
          display: flex;
          justify-content: space-around;
          align-content: start;
          flex-wrap: wrap;
        "
      >
        <div
          v-for="i in medalList"
          :key="i"
          style="margin: 0 10px; width: 100%;display: flex;"
        >
          <div
            style="display: flex; flex-direction: column; align-items: center"
          >
            <span
              style="
                height: 30px;
                width: 150px;
                line-height: 30px;
                font-weight: 600;
                font-size: 25px;
                background-color: rgb(129, 66, 158);
                border-radius: 10px;
                margin-bottom: 10px;
                text-align: center;
              "
              >{{ i.name }}</span
            >
            <transition name="fade">
              <img ref="medalImg" :src="i.url" width="150px" />
            </transition>
          </div>
          <div style="width: 100%;height: 100%;display: flex;align-items: center">
            <div v-for="j in i.stu" :key="j" style="width: 100%;height: 100%;display: flex;align-items: center">
              {{j}}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import ChartShow from "@/components/ChartShow.vue";
import { ref, onMounted } from "vue";

const studentNames = ref([]);
const option = ref({
  title: {
    text: "AI能力评估折线图",
    textStyle: {
      color: "white",
    },
  },
  tooltip: {},
  legend: {
    data: ["AI基础知识", "AI应用能力", "融合创新", "社会责任"],
    textStyle: {
      color: "white",
    },
  },
  xAxis: {
    type: "category",
    data: ["任务1", "任务2", "任务3.1", "任务3.2"],
    axisLabel: {
      color: "white",
    },
  },
  yAxis: {
    type: "value",
    min: 60,
    max: 100,
    axisLabel: {
      color: "white",
    },
  },
  series: [
    {
      name: "AI基础知识",
      type: "line",
      data: [70, 78, 85, 92], // 呈现上升趋势的具体数值
      smooth: true,
    },
    {
      name: "AI应用能力",
      type: "line",
      data: [75, 82, 88, 95], // 呈现上升趋势的具体数值
      smooth: true,
    },
    {
      name: "融合创新",
      type: "line",
      data: [65, 73, 83, 92], // 呈现上升趋势的具体数值
      smooth: true,
    },
    {
      name: "社会责任",
      type: "line",
      data: [72, 79, 86, 94], // 呈现上升趋势的具体数值
      smooth: true,
    },
  ],
});
const option1 = ref({
  title: {
    text: "学生各任务得分柱状图",
    textStyle: {
      color: "white",
    },
  },
  tooltip: {},
  legend: {
    data: ["任务1", "任务2", "任务3.1", "任务3.2"],
    textStyle: {
      color: "white",
    },
  },
  xAxis: {
    type: "category",
    data: [], // 初始为空，后面会填充
    axisLabel: {
      color: "white",
      rotate: 45, // 旋转标签以避免重叠
      interval: 0,
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "white",
    },
  },
  series: [
    {
      name: "任务1",
      type: "bar",
      data: [
        79, 77, 60, 73, 70, 79, 65, 77, 64, 73, 68, 61, 77, 77, 69, 75, 78, 71,
        63, 69, 72, 77, 76, 72, 70, 75, 74, 68, 72, 78, 64, 73, 75, 62, 72, 69,
        74, 77, 71, 70,
      ],
    },
    {
      name: "任务2",
      type: "bar",
      data: [
        86, 72, 70, 78, 80, 84, 72, 87, 71, 79, 76, 57, 75, 82, 75, 85, 85, 81,
        70, 74, 69, 82, 81, 77, 68, 84, 84, 75, 79, 84, 70, 79, 82, 67, 82, 79,
        80, 84, 78, 65,
      ],
    },
    {
      name: "任务3.1",
      type: "bar",
      data: [
        94, 78, 77, 76, 77, 92, 75, 83, 74, 85, 83, 64, 80, 89, 78, 90, 89, 86,
        74, 71, 75, 87, 88, 80, 74, 90, 89, 71, 85, 80, 76, 84, 85, 75, 80, 84,
        86, 78, 81, 71,
      ],
    },
    {
      name: "任务3.2",
      type: "bar",
      data: [
        98, 80, 80, 75, 73, 96, 79, 82, 79, 87, 89, 68, 83, 86, 82, 95, 95, 88,
        79, 74, 73, 93, 94, 86, 77, 96, 94, 77, 90, 82, 82, 81, 90, 71, 82, 83,
        90, 84, 87, 67,
      ],
    },
  ],
});

const option2 = ref({
  title: {
    text: "学生各任务得分柱状图",
    textStyle: {
      color: "white",
    },
  },
  tooltip: {},
  legend: {
    data: ["任务1", "任务2", "任务3.1", "任务3.2"],
    textStyle: {
      color: "white",
    },
  },
  xAxis: {
    type: "category",
    data: [], // 初始为空，后面会填充
    axisLabel: {
      color: "white",
      rotate: 45, // 旋转标签以避免重叠
      interval: 0,
    },
  },
  yAxis: {
    type: "value",
    axisLabel: {
      color: "white",
    },
  },

  series: [
    {
      name: "任务1",
      type: "bar",
      data: [
        77, 77, 73, 77, 62, 61, 73, 74, 75, 63, 60, 70, 69, 62, 61, 70, 60, 68,
        73, 79, 71, 77, 76, 63, 79, 70, 61, 68, 61, 63, 72, 70, 67, 60, 64, 72,
        60, 72, 62, 61,
      ],
    },
    {
      name: "任务2",
      type: "bar",
      data: [
        86, 75, 68, 86, 70, 69, 81, 81, 80, 69, 70, 78, 66, 67, 66, 78, 69, 78,
        70, 77, 67, 85, 82, 72, 88, 78, 59, 77, 56, 69, 77, 77, 75, 70, 70, 82,
        56, 68, 71, 67,
      ],
    },
    {
      name: "任务3.1",
      type: "bar",
      data: [
        91, 79, 74, 94, 68, 77, 77, 75, 85, 67, 75, 83, 70, 70, 60, 81, 75, 82,
        77, 85, 65, 92, 86, 76, 91, 82, 67, 84, 59, 75, 73, 80, 73, 76, 76, 88,
        62, 73, 74, 75,
      ],
    },
    {
      name: "任务3.2",
      type: "bar",
      data: [
        96, 84, 76, 96, 74, 80, 79, 80, 89, 71, 80, 87, 74, 73, 66, 87, 79, 87,
        82, 88, 70, 96, 91, 78, 93, 85, 73, 89, 63, 81, 76, 82, 75, 81, 81, 94,
        65, 79, 78, 80,
      ],
    },
  ],
});
const medalList = ref([
  {
    name: "学习达人",
    url: require("@/img/medal/01.png"),
    stu:["张三","李四","王五","赵六"]
  },
  {
    name: "技能达人",
    url: require("@/img/medal/02.png"),
    stu:["张三","李四","王五","赵六"]
  },
  {
    name: "进步达人",
    url: require("@/img/medal/03.png"),
    stu:["张三","李四","王五","赵六"]
  },
  {
    name: "数字思维",
    url: require("@/img/medal/06.png"),
    stu:["张三","李四","王五","赵六"]
  },
  {
    name: "团队协作",
    url: require("@/img/medal/07.png"),
    stu:["张三","李四","王五","赵六"]
  },
  {
    name: "创新发展",
    url: require("@/img/medal/08.png"),
    stu:["张三","李四","王五","赵六"]
  },
]);
// const GenerateData = () => {
//   const baseScore = 60 + Math.floor(Math.random() * 20);
//   // 任务2分数 - 80%概率比任务1高，20%概率下降
//   let task2Score;
//   if (Math.random() < 0.8) {
//     // 80%概率：比任务1高5-10分
//     task2Score = baseScore + 5 + Math.floor(Math.random() * 6);
//   } else {
//     // 20%概率：比任务1低2-5分
//     task2Score = Math.max(50, baseScore - 2 - Math.floor(Math.random() * 4));
//   }
//   // 任务3.1分数 - 85%概率比任务2高，15%概率下降
//   let task3_1Score;
//   if (Math.random() < 0.85) {
//     // 85%概率：比任务2高3-8分
//     task3_1Score = task2Score + 3 + Math.floor(Math.random() * 6);
//   } else {
//     // 15%概率：比任务2低2-6分
//     task3_1Score = Math.max(50, task2Score - 2 - Math.floor(Math.random() * 5));
//   }
//   // 任务3.2分数 - 90%概率比任务3.1高，10%概率下降
//   let task3_2Score;
//   if (Math.random() < 0.9) {
//     // 90%概率：比任务3.1高2-6分
//     task3_2Score = task3_1Score + 2 + Math.floor(Math.random() * 5);
//   } else {
//     // 10%概率：比任务3.1低1-4分
//     task3_2Score = Math.max(
//       50,
//       task3_1Score - 1 - Math.floor(Math.random() * 4)
//     );
//   }
//   return [baseScore, task2Score, task3_1Score, task3_2Score];
// };

onMounted(() => {
  const storedStudents = localStorage.getItem("studentNames");
  if (storedStudents) {
    studentNames.value = JSON.parse(storedStudents);
    // 更新option1的x轴数据和系列数据
    option1.value.xAxis.data = studentNames.value;
    option2.value.xAxis.data = studentNames.value;

    // // 为每个学生生成4个递增的任务分数
    // // 修改数据生成逻辑部分
    // studentNames.value.forEach((student, index) => {
    //   // 任务1分数在基础分附近
    //   const [baseScore, task2Score, task3_1Score, task3_2Score] =
    //     GenerateData();
    //   option1.value.series[0].data.push(baseScore);
    //   option1.value.series[1].data.push(task2Score);
    //   option1.value.series[2].data.push(task3_1Score);
    //   option1.value.series[3].data.push(task3_2Score);

    //   const [baseScore2, task2Score2, task3_1Score2, task3_2Score2] =
    //     GenerateData();
    //   option2.value.series[0].data.push(baseScore2);
    //   option2.value.series[1].data.push(task2Score2);
    //   option2.value.series[2].data.push(task3_1Score2);
    //   option2.value.series[3].data.push(task3_2Score2);
    // });
    // console.log(option1.value);
  }
});
</script>

<style lang="scss" scoped>
* {
  color: white;
}
.chart {
  width: 1200px;
  height: 400px;
  margin: 10px;

  div {
    background-color: #324374;
    box-shadow: 0 0 10px rgb(34, 31, 38);
  }
}
.title {
  width: 90%;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40px;
  background-color: rgb(129, 66, 158);
  border-radius: 10px;
  margin: 10px auto;
  padding: 10px;

  .a {
    font-weight: 600;
    font-size: 45px;
  }
}
</style>